<template>
        <div id="clock">
          <p class="date">{{ date }}</p>
          <p class="time">{{ time }}</p>
        </div>

</template>

<script>
  var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

  function zeroPadding (num, digit) {
    var zero = ''
    for (var i = 0; i < digit; i++) {
      zero += '0'
    }
    return (zero + num).slice(-digit)
  }

  export default {
    name: 'Clock',
    data () {
      return {
        clock: null,
        timerID: null,
        time: null,
        date: null
      }
    },
    mounted () {
      this.initClock()
    },
    methods: {
      initClock () {
        this.updateTime()
        this.startInterval()
      },
      updateTime () {
        var cd = new Date()
        this.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2)
        this.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth() + 1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()]
      },
      startInterval () {
        if (this.timer) {
          clearInterval(this.timer) //保险起见，如果开始执行定时函数之前，存在timer 则将其清空
        }
        this.timerID = setInterval(this.updateTime, 1000)
      }
    }

  }
</script>

<style lang="less" scoped>
  p {
    margin: 0;
    padding: 0px 0px;
  }

  #clock {
    font-family: 'Share Tech Mono', monospace;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: red;
    text-shadow: 0 0 20px #af7990, 0 0 20px rgba(10, 175, 230, 0);
  }

  #clock .time {
    letter-spacing: 0.05em;
    font-size: 30px;
    padding: 0px 0px;
  }

  #clock .date {
    letter-spacing: 0.1em;
    font-size: 14px;
  }



</style>
